<template>
  <div class="search-bar box-border" v-if="content.componentType === 15" 
    :style="'background:'+content.propMap.backgroundColor" @click="$pt.navigateTo({url: '/pages/home/search-view/main'})">
    <div class="search" :class="searchClass">
      <icon type="search" size="16" class="mar-l-8 mar-r-8"></icon>
      <div class="font-12">{{content.propMap.placeholder}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    content: {
      type: Object,
      default: function() {
        return {}
      }
    }
  }
}
</script>
<style lang="less" scoped>
// 搜索栏样式
.search-bar {
  padding: 5px 15px;
  background: white;
  .search {
    display: flex;
    align-items: center;
    height: 30px;
    color: #aeaeae;
    background-color: #f8f8f8;
    &-align-10 {
      justify-content: left;
    }
    &-align-11 {
      justify-content: center;
    }
    &-shape-12 {
      border-radius: unset;
    }
    &-shape-11 {
      border-radius: 25px;
    }
    &-shape-10 {
      border-radius: 4px;
    }
  }
}
</style>
